﻿<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/png" href="../../assets/img/favicon.ico">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>科普中国后台管理</title>

		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
		<meta name="viewport" content="width=device-width" />

		<!-- Canonical SEO -->
		<link rel="canonical" href="https://www.creative-tim.com/product/light-bootstrap-dashboard-pro" />

		<!--  Social tags      -->
		<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap dashboard, bootstrap, css3 dashboard, bootstrap admin, light bootstrap dashboard, frontend, responsive bootstrap dashboard">

		<meta name="description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful.">

		<!-- Schema.org markup for Google+ -->
		<meta itemprop="name" content="Light Bootstrap Dashboard PRO by Creative Tim">
		<meta itemprop="description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful.">

		<meta itemprop="image" content="http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_thumbnail.jpg">
		<!-- Twitter Card data -->

		<meta name="twitter:card" content="product">
		<meta name="twitter:site" content="@creativetim">
		<meta name="twitter:title" content="Light Bootstrap Dashboard PRO by Creative Tim">

		<meta name="twitter:description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful.">
		<meta name="twitter:creator" content="@creativetim">
		<meta name="twitter:image" content="http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_thumbnail.jpg">
		<meta name="twitter:data1" content="Light Bootstrap Dashboard PRO by Creative Tim">
		<meta name="twitter:label1" content="Product Type">
		<meta name="twitter:data2" content="$29">
		<meta name="twitter:label2" content="Price">

		<!-- Open Graph data -->
		<meta property="og:title" content="Light Bootstrap Dashboard PRO by Creative Tim" />
		<meta property="og:type" content="article" />
		<meta property="og:url" content="http://demos.creative-tim.com/light-bootstrap-dashboard-pro/examples/dashboard.html" />
		<meta property="og:image" content="http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_thumbnail.jpg" />
		<meta property="og:description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful." />
		<meta property="og:site_name" content="Creative Tim" />

		<!-- Bootstrap core CSS     -->
		<link href="../css/bootstrap.min.css" rel="stylesheet" />

		<!--  Light Bootstrap Dashboard core CSS    -->
		<link href="../css/light-bootstrap-dashboard.css" rel="stylesheet" />

		<!--  CSS for Demo Purpose, don't include it in your project     -->
		<link href="../css/demo.css" rel="stylesheet" />

		<!--     Fonts and icons     -->
		<link href="../css/font-awesome.min.css" rel="stylesheet">
		<link href='../css/685fd913f1e14aebad0cc9d3713ee469.css' rel='stylesheet' type='text/css'>
		<link href="../css/pe-icon-7-stroke.css" rel="stylesheet" />
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<script src="../layui/layui.js" charset="utf-8"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>

		<div class="wrapper">
			<div class="sidebar" data-color="orange" data-image="../../assets/img/full-screen-image-3.jpg">
				<!--

            Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple"
            Tip 2: you can also add an image using data-image tag

        -->

				<div class="logo">
					<a href="http://www.creative-tim.com" class="logo-text">
						科普中国
					</a>
				</div>
				<div class="logo logo-mini">
					<a href="http://www.creative-tim.com" class="logo-text">
						KC
					</a>
				</div>

				<div class="sidebar-wrapper">

					<div class="user">
						<div class="photo">
							<img src="../picture/default-avatar.png" />
						</div>
						<div class="info">
							<a data-toggle="collapse" href="#collapseExample" class="collapsed">
								管理员昵称
								<b class="caret"></b>
							</a>
							<div class="collapse" id="collapseExample">
								<ul class="nav">
									<li>
										<a href="#">管理信息</a>
									</li>
									<li>
										<a href="#">修改</a>
									</li>
									<li>
										<a href="#">添加</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<ul class="nav">
						<!--<li>
                    <a href="../dashboard.html">
                        <i class="pe-7s-graph"></i>
                        <p>Dashboard</p>
                    </a>
                </li>-->
						<li>
							<a data-toggle="collapse" href="#componentsExamples">
								<i class="pe-7s-plugin"></i>
								<p>视频管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="componentsExamples">
								<ul class="nav">
									<li>
										<a href="../components/buttons.html">查询所有视频</a>
									</li>
									<li>
										<a href="../components/grid.html">上传视频</a>
									</li>
									<li>
										<a href="../components/icons.html">删除视频</a>
									</li>
									<li>
										<a href="../components/notifications.html">修改视频内容</a>
									</li>

								</ul>
							</div>
						</li>

						<li>
							<a data-toggle="collapse" href="#formsExamples">
								<i class="pe-7s-note2"></i>
								<p>评论管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="formsExamples">
								<ul class="nav">

									<li>
										<a href="../forms/extended.html">查找评论</a>
									</li>

								</ul>
							</div>
						</li>

						<li>
							<a data-toggle="collapse" href="#tablesExamples">
								<i class="pe-7s-news-paper"></i>
								<p>收藏管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="tablesExamples">
								<ul class="nav">
									<li>
										<a href="../tables/regular.html">查询收藏情况</a>
									</li>

								</ul>
							</div>
						</li>

						<li class="active">
							<a data-toggle="collapse" href="#mapsExamples" aria-expanded="true">
								<i class="pe-7s-map-marker"></i>
								<p>用户管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse in" id="mapsExamples">
								<ul class="nav">
									<li class="active">
										<a href="google.html">查询用户信息</a>
									</li>
									<li>
										<a href="vector.html">删除用户信息</a>
									</li>

								</ul>
							</div>
						</li>

						<!--<li>
                    <a href="../charts.html">
                        <i class="pe-7s-graph1"></i>
                        <p>Charts</p>
                    </a>
                </li>

                <li>
                    <a href="../calendar.html">
                        <i class="pe-7s-date"></i>
                        <p>Calendar</p>
                    </a>
                </li>

                <li>
                    <a data-toggle="collapse" href="#pagesExamples">
                        <i class="pe-7s-gift"></i>
                        <p>Pages
                           <b class="caret"></b>
                        </p>
                    </a>
                    <div class="collapse" id="pagesExamples">
                        <ul class="nav">
                            <li><a href="../pages/login.html">Login Page</a></li>
                            <li><a href="../pages/register.html">Register Page</a></li>
                            <li><a href="../pages/lock.html">Lock Screen Page</a></li>
                            <li><a href="../pages/user.html">User Page</a></li>
                            <li><a href="#">More coming soon...</a></li>
                        </ul>
                    </div>
                </li>-->
					</ul>
				</div>
			</div>

			<div class="main-panel">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
						<div class="navbar-minimize">
							<button id="minimizeSidebar" class="btn btn-warning btn-fill btn-round btn-icon">
						<i class="fa fa-ellipsis-v visible-on-sidebar-regular"></i>
						<i class="fa fa-navicon visible-on-sidebar-mini"></i>
					</button>
						</div>
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
							<a class="navbar-brand" href="#">查询用户管理</a>
						</div>
						<div class="collapse navbar-collapse">

							<!--<form class="navbar-form navbar-left navbar-search-form" role="search">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-search"></i></span>
									<input type="text" value="" class="form-control" placeholder="搜索...">
								</div>
							</form>-->

							<ul class="nav navbar-nav navbar-right">
								<li>
									<a href="../charts.html">
										<i class="fa fa-line-chart"></i>
										<p>收益</p>
									</a>
								</li>

								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-gavel"></i>
										<p class="hidden-md hidden-lg">
											Actions
											<b class="caret"></b>
										</p>
									</a>
									<ul class="dropdown-menu">
										<li>
											<a href="#">Create New Post</a>
										</li>
										<li>
											<a href="#">Manage Something</a>
										</li>
										<li>
											<a href="#">Do Nothing</a>
										</li>
										<li>
											<a href="#">Submit to live</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="#">Another Action</a>
										</li>
									</ul>
								</li>

								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-bell-o"></i>
										<span class="notification">5</span>
										<p class="hidden-md hidden-lg">
											Notifications
											<b class="caret"></b>
										</p>
									</a>
									<ul class="dropdown-menu">
										<li>
											<a href="#">Notification 1</a>
										</li>
										<li>
											<a href="#">Notification 2</a>
										</li>
										<li>
											<a href="#">Notification 3</a>
										</li>
										<li>
											<a href="#">Notification 4</a>
										</li>
										<li>
											<a href="#">Another notification</a>
										</li>
									</ul>
								</li>

								<li class="dropdown dropdown-with-icons">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-list"></i>
										<p class="hidden-md hidden-lg">
											More
											<b class="caret"></b>
										</p>
									</a>
									<ul class="dropdown-menu dropdown-with-icons">
										
										<li>
											<a href="#" class="text-danger">
												<i class="pe-7s-close-circle"></i>退出登录
											</a>
										</li>
									</ul>
								</li>

							</ul>
						</div>
					</div>
				</nav>

				<div class="content">
					<div class="container-fluid">
						<div class="demoTable">
							搜索ID：
							<div class="layui-inline">
								<input class="layui-input" name="id" id="demoReload" autocomplete="off">
							</div>
							<button class="layui-btn" data-type="reload">搜索</button>
						</div>

						<table class="layui-hide" id="test" lay-filter="test"></table>

						<script type="text/html" id="toolbarDemo">
							<div class="layui-btn-container">
								<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
								<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
								<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
							</div>
						</script>

						<script type="text/html" id="barDemo">
							<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
							<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
						</script>

						<script src="layui/layui.js" charset="utf-8"></script>
						<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

						<script>
							layui.use(['table', 'form'], function() {
								var table = layui.table;

								table.render({
									elem: '#test',
									url: 'sl.do',
									toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
										,
									defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
										title: '提示',
										layEvent: 'LAYTABLE_TIPS',
										icon: 'layui-icon-tips'
									}],
									title: '用户数据表',
									cols: [
										[{
											type: 'checkbox',
											fixed: 'left'
										}, {
											field: 'id',
											title: 'ID',
											width: 80,
											fixed: 'left',
											unresize: true,
											sort: true
										}, {
											field: 'username',
											title: '用户名',
											width: 120,
											edit: 'text'
										}, {
											field: 'email',
											title: '邮箱',
											width: 150,
											edit: 'text',
											templet: function(res) {
												return '<em>' + res.email + '</em>'
											}
										}, {
											field: 'sex',
											title: '性别',
											width: 80,
											edit: 'text',
											sort: true
										}, {
											field: 'city',
											title: '城市',
											width: 100
										}, {
											field: 'sign',
											title: '签名'
										}, {
											field: 'experience',
											title: '积分',
											width: 80,
											sort: true
										}, {
											field: 'ip',
											title: 'IP',
											width: 120
										}, {
											field: 'logins',
											title: '登入次数',
											width: 100,
											sort: true
										}, {
											field: 'joinTime',
											title: '加入时间',
											width: 120
										}, {
											fixed: 'right',
											title: '操作',
											toolbar: '#barDemo',
											width: 150
										}]
									],
									page: true,
									id: 'testReload'
								});

								//模糊查询开始
								var $ = layui.$,
									active = {
										reload: function() {
											var demoReload = $('#demoReload');

											//执行重载
											table.reload('testReload', {
												page: {
													curr: 1
													//重新从第 1 页开始
												},
												where: {
													"strLike": demoReload.val()
												}
											}, 'data');
										}
									};

								$('.demoTable .layui-btn').on('click', function() {
									var type = $(this).data('type');
									active[type] ? active[type].call(this) : '';
								});

								//头工具栏事件
								table.on('toolbar(test)', function(obj) {
									var checkStatus = table.checkStatus(obj.config.id);
									switch(obj.event) {
										case 'getCheckData':
											var data = checkStatus.data;
											layer.alert(JSON.stringify(data));
											break;
										case 'getCheckLength':
											var data = checkStatus.data;
											layer.msg('选中了：' + data.length + ' 个');
											break;
										case 'isAll':
											layer.msg(checkStatus.isAll ? '全选' : '未全选');
											break;

											//自定义头工具栏右侧图标 - 提示
										case 'LAYTABLE_TIPS':
											layer.alert('这是工具栏右侧自定义的一个图标按钮');
											break;
									};
								});

								//监听提交
								layui.form.on('submit(demo1)', function(data) {
									/*  layer.alert(JSON.stringify(data.field), {
									   title: '最终的提交信息'
									 })  */
									console.log(data.field);
									$.ajax({
										url: "sl.do?op=update",
										type: "post",
										contentType: "application/json",
										data: JSON.stringify(data.field),
										success: function(data) {
											layer.msg(data == "true" ? "操作成功！" : "操作失败！", {
												icon: 1
											}, function() {

												parent.layer.closeAll();

												location.reload();

											});
										}
									});
									return false;
								});

								//监听行工具事件
								table.on('tool(test)', function(obj) {
									var data = obj.data;
									//console.log(obj)
									if(obj.event === 'del') {
										layer.confirm('真的删除行么', function(index) {

											$.post("sl.do", "op=del&id=" + data.id, function(data) {

												layer.msg(data == "true" ? "操作成功！" : "操作失败！", {
													icon: 1
												});
												obj.del();
												layer.close(index);
											})
										});
									} else if(obj.event === 'edit') {
										/* 	layer.prompt({
												formType : 2,
												value : data.email
											}, function(value, index) {
												obj.update({
													email : value
												});
												layer.close(index);
											}); */
										$("#id").val(data.id)
										$("#username").val(data.username)
										$("#email").val(data.email)
										$("#city").val(data.city)

										if(data.sex == "女") {
											$("input[name='sex'][ value='女']").prop("checked", true)
										} else {
											$("input[name='sex'][ value='男']").prop("checked", true)
										}

										$("#sign").val(data.sign)
										layer.open({
											type: 1,
											title: '编辑',

											content: $("#div"),
											area: ['700px', '550px']
										})
										layui.form.render()
									}
								});

							});
						</script>

						<!-- 弹出层文本框表单 -->
						<div id="div" style="display:none;">
							<form class="layui-form" action="" lay-filter="example">

								<div class="layui-form-item">
									<label class="layui-form-label">ID</label>
									<div class="layui-input-block">
										<input type="text" id="id" name="id" lay-verify="title" autocomplete="off" class="layui-input" readonly="readonly">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">用户名</label>
									<div class="layui-input-block">
										<input type="text" id="username" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">邮箱</label>
									<div class="layui-input-block">
										<input type="text" id="email" name="email" placeholder="请输入邮箱" class="layui-input">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">单选框</label>
									<div class="layui-input-block">
										<input type="radio" name="sex" value="男" title="男" checked="">
										<input type="radio" name="sex" value="女" title="女">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">城市</label>
									<div class="layui-input-block">
										<input type="text" id="city" name="city" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
									</div>
								</div>

								<div class="layui-form-item layui-form-text">
									<label class="layui-form-label">签名</label>
									<div class="layui-input-block">
										<textarea placeholder="请输入内容" id="sign" class="layui-textarea" name="sign"></textarea>
									</div>
								</div>

								<div class="layui-form-item">
									<div class="layui-input-block">
										<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
									</div>
								</div>
							</form>

						</div>

					</div>

				</div>

			</div>
		</div>

		

	</body>

	<!--   Core JS Files and PerfectScrollbar library inside jquery.ui   -->
	<!--   Core JS Files and PerfectScrollbar library inside jquery.ui   -->
	<script src="../js/jquery.min.js" type="text/javascript"></script>
	<script src="../js/jquery-ui.min.js" type="text/javascript"></script>
	<script src="../js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Forms Validations Plugin -->
	<!--<script src="../js/jquery.validate.min.js"></script>
-->
	<!--  Plugin for Date Time Picker and Full Calendar Plugin-->
	<!--<script src="../js/moment.min.js"></script>-->

	<!--  Date Time Picker Plugin is included in this js file -->
	<!--<script src="../js/bootstrap-datetimepicker.js"></script>-->

	<!--  Select Picker Plugin -->
	<!--<script src="../js/bootstrap-selectpicker.js"></script>-->

	<!--  Checkbox, Radio, Switch and Tags Input Plugins -->
	<!--<script src="../js/bootstrap-checkbox-radio-switch-tags.js"></script>-->

	<!--  Charts Plugin -->
	<!--<script src="../js/chartist.min.js"></script>-->

	<!--  Notifications Plugin    -->
	<!--<script src="../js/bootstrap-notify.js"></script>-->

	<!-- Sweet Alert 2 plugin -->
	<!--<script src="../js/sweetalert2.js"></script>-->

	<!-- Vector Map plugin -->
	<!--<script src="../js/jquery-jvectormap.js"></script>-->

	<!--  Google Maps Plugin    -->
	<!--<script src="../js/aa743e8f448a4792bad10d201a7080f6.js"></script>-->

	<!-- Wizard Plugin    -->
	<!--<script src="../js/jquery.bootstrap.wizard.min.js"></script>-->

	<!--  Bootstrap Table Plugin    -->
	<!--<script src="../js/bootstrap-table.js"></script>-->

	<!--  Plugin for DataTables.net  -->
	<!--<script src="../js/jquery.datatables.js"></script>-->

	<!--  Full Calendar Plugin    -->
	<!--<script src="../js/fullcalendar.min.js"></script>-->

	<!-- Light Bootstrap Dashboard Core javascript and methods -->
	<script src="../js/light-bootstrap-dashboard.js"></script>

	<!--   Sharrre Library    -->
	<!--<script src="../js/jquery.sharrre.js"></script>-->

	<!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! -->
<!--	<script src="../js/demo.js"></script>-->

	<script>
		$().ready(function() {
			demo.initSmallGoogleMaps();
		});
	</script>

	<script>
		(function(i, s, o, g, r, a, m) {
			i['GoogleAnalyticsObject'] = r;
			i[r] = i[r] || function() {
				(i[r].q = i[r].q || []).push(arguments)
			}, i[r].l = 1 * new Date();
			a = s.createElement(o),
				m = s.getElementsByTagName(o)[0];
			a.async = 1;
			a.src = g;
			m.parentNode.insertBefore(a, m)
		})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

		ga('create', 'UA-46172202-1', 'auto');
		ga('send', 'pageview');
	</script>

</html>